<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            margin: 100px;
            background-color: tomato;

            /* 调用动画 */
            /* animation: move1 1s alternate linear infinite; */
            /* animation: move2 4s alternate linear infinite; */
            /* animation: move2 4s; */
            animation: move2 4s steps(4);
        }

        /* 定义一组动画 */
        @keyframes move1 {
            from {
                transform: rotateX(0px) rotate(0deg);
            }
            to {
                transform: translateX(500px) rotate(600deg);
            }
        }

        /* 定义多组动画，使用播放时间的百分比设置状态 */
        @keyframes move2{
            0% {
                transform: translateX(0px) translateY(0px) ;
                background-color: tomato;
            }
            25% {
                transform: translateX(500px) translateY(0px);
            }
            /* 执行到50%，背景变黄绿色，形状变圆形 */
            50% {
                /* X轴的值是相对初始状态的位置设置的 */
                transform: translateX(500px) translateY(200px);
                background-color: yellowgreen;
                border-radius: 50%;
            }
            75% {
                transform: translateX(0px) translateY(200px);
            }
            /* 播放完的时候，背景色还原，形状也还原 */
            100% {
                transform: translateX(0px) translateY(0px);
                background-color: teal;
            }

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>